<template>
  <el-row>
    <el-col :span="24">
      <ul class="mediainfo">
        <li>
          <span>视频名称：</span>
          <span v-if="isedit">
            <el-input placeholder="请输入视频名称" v-model="seriesData.name" class="input-w" size="mini" :minlength="2" :maxlength="30" show-word-limit/>
          </span>
          <span v-else>{{seriesData.name}}</span>
        </li>
        <li>
          <span>所属直播间：</span>
          <span>{{seriesData.medianame}}</span>
        </li>
        <li>
          <span>视频ID：</span>
          <span>{{seriesData.seriesid}}</span>
        </li>
        <li>
          <span>状态:</span>
          <span v-if="seriesData.inuse == 1" style="color: #00C653">上线</span>
          <span v-else style="color: red">下线</span>
        </li>
        <li>
          <span>视频类型：</span>
          <span>预约直播</span>
        </li>
        <li>
          <span>付费类型：</span>
          <span v-if="seriesData.media && seriesData.media.paytype == 0">
            <span style="color: #67C23A">免费</span>
          </span>
          <span v-else>
            <span v-show="!isedit">
              <span v-if="seriesData.paytype == 1" style="color: #F56C6C">付费</span>
              <span v-else style="color: #67C23A">免费</span>
            </span>
            <span v-show="isedit">
              <el-switch
                      v-model="seriesData.paytype"
                      inline-prompt
                      active-text="付费"
                      inactive-text="免费"
                      active-color="#F56C6C"
                      inactive-color="#67C23A"
                      :active-value="1"
                      :inactive-value="0"
              />
            </span>
          </span>
        </li>
        <li>
          <span>排序：</span>
          <span>{{seriesData.sequence}}</span>
        </li>

        <li>
          <span>画面：</span>
          <span v-if="seriesData.extends && seriesData.extends.videolayout">
            {{seriesData.extends.videolayout === 'horizontal' ? '横屏' : '竖屏'}}
          </span>
          <span v-else>--</span>
        </li>
        <li>
          <span>创建时间：</span>
          <span>{{seriesData.ctime ? seriesData.ctime.replace('T', ' ') : '--'}}</span>
        </li>
        <li>
          <span>直播状态：</span>
          <span v-if="seriesData.extends && seriesData.extends.livestate">
            <span v-if="seriesData.extends.livestate == 'pending'" style="color: #ee9900">直播等待</span>
            <span v-else-if="seriesData.extends.livestate == 'live'" style="color: #00C653">直播中</span>
            <span v-else style="color: red">直播结束</span>
          </span>
          <span v-else>--</span>
        </li>
        <li>
          <span>预约播出时间：</span>
          <span v-if="isedit == 1">
            <el-date-picker
                    v-if="seriesData.extends"
                    v-model="seriesData.extends.reservetime"
                    type="datetime"
                    placeholder="请选择预约播出时间"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    size="mini"
            />
          </span>
          <span v-else>
            <span v-if="seriesData.extends && seriesData.extends.reservetime">
            {{seriesData.extends.reservetime.replace('T', ' ')}}
          </span>
          <span v-else>--</span>
          </span>
        </li>
        <li>
          <span>创建账号ID</span>
          <span>{{seriesData.uid}}</span>
        </li>
        <li>
          <span>实际播出时间：</span>
          <span v-if="seriesData.extends && seriesData.extends.starttime">
            {{seriesData.extends.starttime.replace('T', ' ')}}
          </span>
          <span v-else>--</span>
        </li>
        <li>
          <span>实际结束时间：</span>
          <span v-if="seriesData.extends && seriesData.extends.endtime">
            {{seriesData.extends.endtime.replace('T', ' ')}}
          </span>
          <span v-else>--</span>
        </li>
        <li>
          <span>开播主播账号ID：</span>
          <span v-if="seriesData.extends && seriesData.extends.liveuid">
            {{seriesData.extends.liveuid}}
          </span>
          <span v-else>--</span>
        </li>
      </ul>
      <ul class="mediainfo" v-if="seriesData.extends && seriesData.extends.anchors && seriesData.extends.anchors.length > 0">
        <span v-for="anchor in seriesData.extends.anchors" :key="anchor.idnum">
          <li>
            <span>主播姓名：</span>
            <span>{{anchor.fullname}}</span>
          </li>
          <li>
            <span>主播认证编号：</span>
            <span>{{anchor.idnum}}</span>
          </li>
        </span>
      </ul>
    </el-col>
  </el-row>
</template>

<script>
  import {toRef} from 'vue'
  export default {
    name: "ReserveLiveSeries",
    props: {
      seriesinfo: {
        type: Object
      },
      isedit: {
        type: Boolean,
        default: false
      }
    },
    setup(props) {
      const seriesData = toRef(props, 'seriesinfo')

      return {
        seriesData
      }
    }
  }
</script>

<style scoped>

</style>
